.user-record-container {
  width: 100%;
  margin-bottom: 36px;
  text-align: left;
  background-color: #fff;

  .loading {
    width: 100%;
    height: 26px;
    padding: 20px 0;
    color: #999;
    text-align: center;

    .loading-icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 2px;
      vertical-align: middle;
      background: url('@/assets/image/loading.gif') no-repeat;
    }
  }

  .title {
    position: relative;
    height: 33px;
    margin: 0 40px;
    border-bottom: 2px solid #c20c0c;
    text-align: left;

    .title-text {
      display: inline-block;
      font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
      font-size: 20px;
      font-weight: normal;
      color: #666;
      vertical-align: bottom;
    }

    .title-desc {
      display: inline-block;
      margin-left: 10px;
      font-weight: 400;
      color: #666;
      vertical-align: bottom;
    }

    .title-desc-icon {
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-left: 10px;
      overflow: hidden;
      vertical-align: middle;
      background: url('@/assets/image/icon2.png') no-repeat;
      background-position: 0 -50px;
    }

    .title-operate {
      position: absolute;
      right: 0;
      bottom: 5px;

      .song-week {
        display: inline-block;
        line-height: 26px;
        color: #666;
        vertical-align: middle;
        cursor: pointer;
      }

      .song-icon {
        display: inline-block;
        width: 1px;
        height: 12px;
        margin: 0 8px;
        vertical-align: middle;
        background-color: #999;
      }

      .song-all {
        display: inline-block;
        line-height: 26px;
        color: #666;
        vertical-align: middle;
        cursor: pointer;
      }

      .song-active {
        font-weight: 700;
        color: #333;
      }
    }
  }

  .list {
    margin: 0 40px;
    border: 1px solid #e2e2e2;
    border-top: none;

    .item {
      height: 38px;
      overflow: hidden;
      line-height: 38px;

      &:hover {
        background-color: #eee;

        .song {
          .song-text {
            .text {
              max-width: 79%;
            }
          }

          .operate-btn {
            text-align: left;
            visibility: visible;

            .icon {
              margin-right: 8px;
            }
          }
        }
      }

      .hd {
        display: inline-block;
        height: 38px;
        line-height: 38px;
        vertical-align: middle;

        .icon-play {
          display: inline-block;
          width: 17px;
          height: 17px;
          vertical-align: middle;
          cursor: pointer;
          background: url('@/assets/image/icon-table.png');
          background-position: 0 -103px;
        }

        .active-play {
          background-position: -20px -128px;
        }

        .text {
          display: inline-block;
          width: 37px;
          padding-right: 8px;
          padding-left: 5px;
          overflow: hidden;
          font-size: 16px;
          color: #666;
          text-align: right;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
        }
      }

      .song {
        position: relative;
        display: inline-block;
        width: 500px;
        height: 38px;
        padding-left: 10px;
        overflow: hidden;
        vertical-align: middle;

        .song-text {
          display: inline-block;
          width: 100%;
          overflow: hidden;
          color: #333;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;

          &:hover {
            text-decoration: underline;
          }

          .text {
            display: inline-block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;

            .desc {
              display: inline-block;
              vertical-align: middle;
            }

            .desc .em {
              margin: 0 5px;
            }

            .desc .desc-text {
              display: inline-block;
              color: #aeaeae;
              vertical-align: middle;
              cursor: pointer;
            }

            .desc .desc-text:hover {
              text-decoration: underline;
            }
          }
        }

        .operate-btn {
          position: absolute;
          top: 0;
          right: 0;
          display: inline-block;
          width: 98px;
          height: 38px;
          line-height: 38px;
          vertical-align: middle;
          visibility: hidden;

          .icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 10px;
            margin-left: 0;
            vertical-align: middle;
            cursor: pointer;
            background: url('@/assets/image/icon-table.png');
          }

          .add {
            width: 13px;
            height: 13px;
            background: url('@/assets/image/icon.png');
            background-position: 0 -700px;

            &:hover {
              background-position: -22px -700px;
            }
          }

          .collect {
            width: 18px;
            background-position: 0 -174px;

            &:hover {
              background-position: -20px -174px;
            }
          }

          .share {
            background-position: 0 -195px;

            &:hover {
              background-position: -20px -195px;
            }
          }

          .download {
            background-position: -81px -174px;

            &:hover {
              background-position: -104px -174px;
            }
          }
        }
      }

      .tops {
        position: relative;
        display: inline-block;
        width: 319px;
        height: 38px;
        line-height: 38px;
        vertical-align: middle;

        .bg {
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 38px;
          background-color: #4eb4f5;
          opacity: .1;
        }

        .times {
          position: absolute;
          left: 10px;
          z-index: 1;
          height: 38px;
          line-height: 38px;
          color: #666;
        }
      }
    }
  }

  .more {
    height: 32px;
    margin: 0 40px;
    line-height: 32px;
    color: #666;
    text-align: right;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }

  .no-data {
    padding: 105px 0;
    text-align: center;

    .no-data-title {
      width: 100%;
      padding-bottom: 16px;
      margin: 0 auto;
      text-align: center;

      .icon {
        display: inline-block;
        width: 64px;
        height: 50px;
        margin-right: 17px;
        vertical-align: middle;
        background: url('@/assets/image/icon.png');
        background-position: 0 -347px;
      }

      .text {
        display: inline-block;
        font-size: 18px;
        color: #333;
        vertical-align: middle;
      }
    }
  }
}
